<template>
  <view class="page">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="nav-bar">
        <image 
          class="back-icon" 
          src="/static/recharge/d2d56def1b7e4daac7adad19dc740323.png" 
          @tap="handleBack"
        />
        <text class="title">会员充值</text>
      </view>
      
      <!-- 账户余额 -->
      <view class="balance-info">
        <text class="label">当前余额</text>
        <view class="amount">
          <text class="symbol">¥</text>
          <text class="value">128.88</text>
        </view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="content">
      <!-- 充值金额卡片 -->
      <view class="recharge-card">
        <text class="card-title">选择充值金额</text>
        <!-- 金额选择网格 -->
        <view class="amount-grid">
          <view 
            v-for="(item, index) in amounts" 
            :key="index"
            :class="['amount-item', {'active': selectedAmount === item.value}]"
            @tap="selectAmount(item)"
          >
            <view class="amount">
              <text class="symbol">¥</text>
              <text class="value">{{item.value}}</text>
            </view>
            <text class="gift">赠送{{item.gift}}元</text>
          </view>
        </view>

        <!-- 自定义金额输入 -->
        <view class="custom-amount">
          <text class="symbol">¥</text>
          <input 
            type="digit"
            class="input"
            v-model="customAmount"
            placeholder="输入自定义金额"
            @input="handleCustomInput"
          />
        </view>
      </view>

      <!-- 充值说明 -->
      <view class="notice">
        <text class="notice-title">充值说明</text>
        <text class="notice-item">1、本次充值可用于平台上消费，各地区跨站点皆可使用。</text>
        <text class="notice-item">2、若遇到充值未到账，请联系客服。</text>
      </view>
    </view>

    <!-- 底部充值按钮 -->
    <view class="bottom-bar">
      <view class="recharge-btn" @tap="handleRecharge">
        <text>立即充值</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {
        selectedAmount: 100,
        customAmount: '',
        amounts: [
          { value: 50, gift: 5 },
          { value: 100, gift: 12 },
          { value: 200, gift: 30 }
        ]
      };
    },

    methods: {
      selectAmount(item) {
        this.selectedAmount = item.value
        this.customAmount = ''
      },
      handleCustomInput(e) {
        const value = e.detail.value
        if(value) {
          const amount = Number(value)
          if(!isNaN(amount) && amount > 0) {
            this.selectedAmount = amount
          }
        } else {
          this.selectedAmount = this.amounts[0].value
        }
      },
      handleRecharge() {
        uni.showModal({
          title: '确认充值',
          content: `确认充值${this.selectedAmount}元？`,
          success: (res) => {
            if(res.confirm) {
              uni.showLoading({
                title: '充值中...'
              })
              setTimeout(() => {
                uni.hideLoading()
                uni.showToast({
                  title: '充值成功',
                  icon: 'success',
                  duration: 2000,
                  success: () => {
                    setTimeout(() => {
                      uni.navigateBack()
                    }, 2000)
                  }
                })
              }, 1500)
            }
          }
        })
      },
      handleBack() {
        uni.navigateBack()
      },
      goToRecord() {
        uni.navigateTo({
          url: '/pages/my/recharge-record'
        })
      }
    },
  };
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f8f8f8;
}

.header {
  background: linear-gradient(135deg, #8cd548 0%, #6ab52e 100%);
  padding-top: 88rpx;
  padding-bottom: 60rpx;
  
  .nav-bar {
    position: relative;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .back-icon {
      position: absolute;
      left: 30rpx;
      width: 48rpx;
      height: 48rpx;
      padding: 10rpx;
    }
    
    .title {
      font-size: 32rpx;
      color: #fff;
      font-weight: bold;
    }
  }
  
  .balance-info {
    text-align: center;
    margin-top: 40rpx;
    
    .label {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 16rpx;
      display: block;
    }
    
    .amount {
      display: flex;
      align-items: baseline;
      justify-content: center;
      
      .symbol {
        font-size: 32rpx;
        color: #fff;
        margin-right: 8rpx;
      }
      
      .value {
        font-size: 60rpx;
        color: #fff;
        font-weight: bold;
        font-family: 'DIN';
      }
    }
  }
}

.content {
  margin-top: -40rpx;
  padding: 0 30rpx;
  padding-bottom: 120rpx;
  
  .recharge-card {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    
    .card-title {
      font-size: 30rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 30rpx;
    }
    
    .amount-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20rpx;
      margin-bottom: 30rpx;
      
      .amount-item {
        background: #f8f8f8;
        border-radius: 16rpx;
        padding: 30rpx 20rpx;
        text-align: center;
        border: 2rpx solid transparent;
        
        .amount {
          margin-bottom: 12rpx;
          
          .symbol {
            font-size: 24rpx;
            color: #333;
          }
          
          .value {
            font-size: 36rpx;
            color: #333;
            font-weight: bold;
          }
        }
        
        .gift {
          font-size: 24rpx;
          color: #999;
        }
        
        &.active {
          background: rgba(140, 213, 72, 0.1);
          border-color: #8cd548;
          
          .symbol, .value {
            color: #8cd548;
          }
          
          .gift {
            color: #8cd548;
          }
        }
      }
    }
    
    .custom-amount {
      display: flex;
      align-items: center;
      background: #f8f8f8;
      border-radius: 16rpx;
      padding: 30rpx;
      
      .symbol {
        font-size: 32rpx;
        color: #8cd548;
        margin-right: 12rpx;
      }
      
      .input {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}

.notice {
  padding: 0 20rpx;
  
  .notice-title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
  }
  
  .notice-item {
    font-size: 24rpx;
    color: #999;
    line-height: 1.6;
    display: block;
  }
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx 40rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
  
  .recharge-btn {
    height: 88rpx;
    background: linear-gradient(135deg, #8cd548 0%, #6ab52e 100%);
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    text {
      font-size: 32rpx;
      color: #fff;
      font-weight: 500;
    }
    
    &:active {
      transform: scale(0.98);
    }
  }
}
</style>